<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="canvas"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var context  =  canvas.getContext('2d');
    // x,y 圆心坐标 radius 圆的半径  Math.PI / 180 * startAngle 起始弧度 Math.PI / 180 * endAngle 终止弧度 anticlockwise 是否逆时针绘制 boolen
    // context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);
    context.arc(200, 200, 100, Math.PI / 180 * 0, Math.PI / 180 * 360);
    //设置颜色
    context.strokeStyle='red';
    // 绘制空心圆
    context.stroke();
    // 设置填充颜色
    context.fillStyle='skyblue';
    //绘制实习圆
    context.fill();
    
</script>
</html>